<template>
  <div class="page-home">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory />
        <!-- banner轮播图 -->
        <HomeBanner/>
        <!-- 新鲜好物 -->
        <homePannelVue title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
          <template #right>
            <XtxMore/>
          </template>
          <template #main>
            <!-- 数据列表 -->
            <ul ref="pannel" class="goods-list">
        <li v-for="item in newData" :key="item.id">
          <RouterLink :to="`/good/${item.id}`">
            <img alt="" v-img-lazy="item.picture"/>
            <p class="name">{{ item.name }}</p>
            <p class="price">&yen;{{ item.price }}</p>
          </RouterLink>
        </li>
      </ul>
          </template>
        </homePannelVue>
        <!-- 新鲜好物 -->
        <homePannelVue title="人气推荐" sub-title="人气爆款 不容错过">
          <template #main>
            <!-- 数据列表 -->
            <ul  class="goods-list">
      <li v-for="item in goods" :key="item.id">
        <RouterLink to="/">
          <img alt="" v-img-lazy="item.picture"/>
          <p class="name">{{item.title}}</p>
          <p class="desc">{{item.alt}}</p>
        </RouterLink>
      </li>
    </ul>
          </template>
        </homePannelVue>
      </div>
    </div>
  </div>
</template>
<script>
import HomeCategory from './components/home-category'
import HomeBanner from './components/home-banner'
import homePannelVue from './components/home-pannel.vue'
import { findHot, findNew } from '@/api/home'

import { ref } from 'vue'
export default {
  name: 'PageHome',
  components: { HomeCategory, HomeBanner, homePannelVue },
  setup () {
    const newData = ref([])
    const goods = ref([])
    async function loadNewData () {
      const res = await findNew()
      newData.value = res.data.result
      const res2 = await findHot()
      goods.value = res2.data.result
    }
    loadNewData()
    return {
      newData,
      goods
    }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;
  li {
    width: 306px;
    height: 406px;
    background: #f0f9f4;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      color: @priceColor;
    }
  }
}
</style>
